<template>
    <div>
        <el-dialog :title="isAdd ? '添加活动' : '编辑活动'" :visible.sync="isShow" :before-close="close">
            <el-form :model="form" label-width="80px" :rules="rules" ref="form">

                <el-form-item label="活动名称" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="活动时间">
                    <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="date">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="一级分类" prop="first_cateid">
                    <el-select v-model="form.first_cateid" placeholder="请选择" @change="change1(true)">
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" prop="second_cateid">
                    <el-select v-model="form.second_cateid" placeholder="请选择" @change="change2(true)">
                        <el-option v-for="item in cateArr" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品">
                    <el-select v-model="form.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in shopList" :key="item.id" :label="item.goodsname"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { number } from "echarts"
import { goodslist, seckadd, seckedit, seckinfo } from "../../request/api"
import { mapGetters, mapActions } from 'vuex'

export default {
    props: ["isShow", "isAdd"],
    data() {
        return {
            form: {
                title: "",//限时秒杀名称
                begintime: "",//开始时间
                endtime: "",//结束时间
                first_cateid: "",//商品一级分类编号
                second_cateid: "",//商品二级分类编号
                goodsid: "",//商品编号
                status: 1// 状态   1正常2禁用
            },
            shopList: [],//商品列表
            cateArr: [], //二级分类
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ]
            },
            time: []
        }
    },
    methods: {
        ...mapActions({
            getCateList: "cate/getCateListAction",
            getSeckList: "seck/getSeckListActions"
        }),
        date(date) {
            this.time = date
            this.form.begintime = this.time[0].getTime()
            this.form.endtime = this.time[1].getTime()
            // console.log(this.form);
        },
        reset() {
            this.form = {
                title: "",//限时秒杀名称
                begintime: "",//开始时间
                endtime: "",//结束时间
                first_cateid: "",//商品一级分类编号
                second_cateid: "",//商品二级分类编号
                goodsid: "",//商品编号
                status: 1// 状态   1正常2禁用
            }
            this.$refs.form.resetFields()
            this.time = []
        },
        close() {
            this.$emit("close")
            this.reset()
        },
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    // console.log(this.form);
                    if (this.isAdd) {
                        seckadd(this.form)
                            .then(res => {
                                // console.log(res);
                                if (res.code == 200) {
                                    this.$message(res.msg);
                                    this.getSeckList()
                                    this.close()
                                }
                            })
                    } else {
                        seckedit(this.form)
                            .then(res => {
                                // console.log(res);
                                if (res.code == 200) {
                                    this.$message(res.msg);
                                    this.getSeckList()
                                    this.close()
                                }
                            })
                    }
                }
            })


        },
        change1(n) {
            //思路：知道当前用户选中的id值，拿id去数组中进行查找，找到所在下标，自然获得当前数组下标下的children
            let index = this.catelist.findIndex((item) => {
                return item.id == this.form.first_cateid
            })
            this.cateArr = this.catelist[index].children
            //每次切换都需要清空二级分类

            // 判断当用户点击的时候才清空
            if (n) {
                this.form.second_cateid = "",
                    this.form.goodsid = ""
            }
        },
        change2(n) {
            goodslist().then(res => {
                this.shopList = res.list.filter(item => {
                    return item.second_cateid == this.form.second_cateid
                })
            })
            if (n) {
                this.form.goodsid = ""
            }


        },
        lookup(id) {
            seckinfo({ id })
                .then(res => {
                    this.form = res.list
                    this.form.id = id
                    this.time=[new Date(Number(res.list.begintime)),new Date(Number(res.list.endtime))]
                    this.change1(false)
                    this.change2(false)
                })

        }
    },
    mounted() {
        this.getCateList()
        this.getSeckList()


    },
    watch: {},
    computed: {
        ...mapGetters({
            catelist: "cate/getCate",

        }),
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>